<template>
    <!-- pages/mallorder/logistics/index.wxml -->
    <view class="padding">
        <view v-if="infoData.logisticCode" class="steps_box">
            <view class="steps_text">
                <text>{{ infoData.deliveryName || '快递' }}:</text>
                <text>{{ infoData.logisticCode }}</text>
            </view>
            <view class="steps_btn" @tap="fuzhifun" :data-num="infoData.logisticCode || ''">复制</view>
        </view>
        <!-- <view wx:if="{{steps.length == 0 && infoData.LogisticCode}}" class="centers">
    商家已发货
  </view> -->
        <van-steps v-if="steps.length > 0" :steps="steps" :active="active" direction="vertical" active-color="#FF8722" />
        <van-empty v-if="steps.length == 0 && !infoData.logisticCode" class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无物流信息~" />
    </view>
</template>

<script>
// pages/mallorder/logistics/index.js
const _request = require('../../../utils/request.js');

const app = getApp();
export default {
    data() {
        return {
            active: 0,
            steps: [],
            id: '',
            infoData: null,
            type: 0 //0商城订单, 1意豆订单
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            id: options?.id,
            type: options?.type || 0
        });

        if (options.time) {
            this.setData({
                steps: [
                    {
                        text: '商品已经打包等待快递点揽收',
                        desc: options.time
                    }
                ]
            });
        }

        this.getInfo();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        fuzhifun(e) {
            uni.setClipboardData({
                data: e.currentTarget.dataset.num,
                success: function (res) {
                    uni.showToast({
                        title: '复制成功',
                        duration: 1000,
                        icon: 'none'
                    });
                }
            });
        },

        //获取物流信息
        getInfo() {
            let url = '/mall-order-item/orderLogisticsTracking'; // if(this.data.type == 1){
            //   url = '/yidou/order/logistics';
            // }

            _request
                .get(
                    url,
                    {
                        id: this.id
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        let trace = res.data.data?.traces?.filter((item) => {
                            item.text = item.acceptStation;
                            item.desc = item.acceptTime;
                            return item;
                        });
                        this.setData({
                            infoData: res.data.data
                        });

                        if (trace?.length > 0) {
                            this.setData({
                                steps: trace?.reverse()
                            });
                        }
                    } else {
                        uni.showToast({
                            title: res.data.message || '请求失败',
                            icon: 'none'
                        });
                    }
                });
        }
    }
};
</script>
<style>
/* pages/mallorder/logistics/index.wxss */
.steps_box {
    height: 106rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    line-height: 106rpx;
    margin: 20rpx 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.steps_text text:nth-child(1) {
    color: #333;
    line-height: 100rpx;
}

.steps_text text:nth-child(2) {
    color: #999;
    line-height: 100rpx;
}

.steps_btn {
    color: #ff8722;
    line-height: 100rpx;
}
</style>
